import type { VbenFormProps, VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { dictdataPage } from './api';
import { type Dict } from './interface';
import { computed, ref } from 'vue';

export const DictId = ref<String>('');
export const AlldictList = ref<Dict[]>([]);

// 表格表单配置
export const formOptions: VbenFormProps = {
  schema: [
    {
      component: 'Input',
      defaultValue: '',
      fieldName: 'dicDataTitle',
      label: '字典项',
    },
  ],
  wrapperClass: 'grid-cols-4',
};

// 表格配置
export const gridOptions: VxeTableGridOptions = {
  columns: [
    { title: '序号', type: 'seq', width: 80 },
    { title: '字典名称', field: 'dicDataTitle', align: 'left' },
    { title: '排序值', field: 'sortOrder', width: 200 },
    {
      title: '状态',
      field: 'state',
      cellRender: {
        name: 'CellDict',
        props: { dictType: 'STATE' },
      },
      width: 120,
    },
    { title: '创建日期', field: 'createTime', width: 200 },
    { slots: { default: 'action' }, title: '操作', width: 160 },
  ],
  minHeight: '100%',
  maxHeight: '100%',
  keepSource: true,
  proxyConfig: {
    // autoLoad: false,
    ajax: {
      query: async ({ page }, formValues) => {
        return await dictdataPage({
          page: page.currentPage,
          limit: page.pageSize,
          ...formValues,
          dictId: DictId.value,
        });
      },
    },
    response: {
      result: 'data.records',
      total: 'data.total',
      list: 'data.records',
    },
  },
  pagerConfig: {
    enabled: true,
    pageSize: 20,
  },
  toolbarConfig: {
    custom: true,
    export: false,
    import: false,
    refresh: true,
    zoom: true,
  },
};

// 编辑表单配置
export const formSchema: VbenFormSchema[] = [
  {
    component: 'Input',
    fieldName: 'dictId',
    label: '分类id',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入分类编码',
    },
    fieldName: 'dicType',
    label: '分类编码',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入分类名称',
    },
    fieldName: 'dicTitle',
    label: '分类名称',
    rules: 'required',
  },
];

// 编辑弹窗表单配置
export const drawerFormSchema: VbenFormSchema[] = [
  {
    component: 'Input',
    fieldName: 'dictDataId',
    label: '字典id',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    component: 'Select',
    componentProps: {
      allowClear: true,
      filterOption: true,
      options: computed(() => {
        return AlldictList.value.map((item) => {
          return {
            label: item.dicTitle,
            value: item.dictId,
          };
        });
      }),
      placeholder: '请选择',
      showSearch: true,
    },
    fieldName: 'dictId',
    label: '字典分类',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入字典项标题',
      allowClear: true,
    },
    fieldName: 'dicDataTitle',
    label: '字典项标题',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入字典项内容',
      allowClear: true,
    },
    fieldName: 'dicDataValue',
    label: '字典项内容',
  },
  {
    component: 'RadioGroup',
    componentProps: {
      options: [
        {
          label: '正常',
          value: 1,
        },
        {
          label: '禁用',
          value: 0,
        },
      ],
    },
    fieldName: 'state',
    defaultValue: 1,
    label: '状态',
    rules: 'required',
  },
  {
    component: 'InputNumber',
    componentProps: {
      placeholder: '请输入排序值',
    },
    fieldName: 'sortOrder',
    defaultValue: 1,
    label: '排序值',
  },
];
